<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>集客平台</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		
		<style type="text/css">
		.info{
				width: 350px;
				height:365px;
				float: right;
				border: 1px #A9A9A9 solid;
				color: #999999;
			}
			.card-box {
				padding: 20px;
				border: 1px solid rgba(54, 64, 74, 0.05);
				-webkit-border-radius: 5px;
				border-radius: 5px;
				-moz-border-radius: 5px;
				background-clip: padding-box;
				margin-bottom: 20px;
				background-color: #ffffff;
			}
			body {
				margin: 0;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				font-size: 14px;
				line-height: 1.4285;
				color: #333;
				background-color: #fff;
			}
			body {
				background: #ebeff2;
				font-family: "microsoft yahei","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
				margin: 0;
				overflow-x: hidden;
				color: #797979;
			}
			.m-t-20 {
				margin-top: 20px !important;
			}
			.pull-right {
				float: right;
			}
			.inbox-widget .inbox-item {
				border-bottom: 1px solid #f1f1f1;
				overflow: hidden;
				padding: 10px 0;
				position: relative;
			}
			p {
				margin: 0 0 10px;
			}
			.m-b-10 {
				margin-bottom: 10px !important;
			}
			.inbox-widget .inbox-item .inbox-item-author {
				color: #333333;
				display: block;
				margin: 0;
				width: 95%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.inbox-widget .inbox-item .inbox-item-date {
				color: #a9a9a9;
				font-size: 11px;
				position: absolute;
				right: 7px;
				top: 2px;
			}
			.inbox-widget .inbox-item .inbox-item-date {
				right: 7px;
				top: calc(-20px + 100%);
			}
			
	.box2{
		height:380px;
		padding:10px;
		font-size: 20px;
		font-weight: bold;
		line-height: 20px;
		background: #ff3333;
		color: white;
	}
	.box1 img{
		/* margin: 0 auto; */
		width: 300px;
		height:380px;
		float: left;
	}
	.box3 img{
		width: 610px;
		height: 300px;
	}
	.imgright{
		width: 500px;
		float: right;
	}
	#lefbox{
		width:570px;
		float:left;
	}
		</style>
	</head>
	<body>
		<div id="app">
		<br/>
			<div id="lefbox">
			<el-row>
				<el-col>
				<!-- dialogFormVisible3=true -->
					<el-button plain @click="dialogFormVisible3=true" style="width: 270px;height:90px;background: #D5D5D5;">
						<div class="theme" style="float: left;font-weight: bold;">财神到<br/></div>
						<!-- <p>浏览：0 集客：0</p> -->
						<p class="dtime" style="float: right;">2018-12-31</p>
					</el-button>
					
					<el-button plain @click="dialogFormVisible4=true" style="width: 270px;height:90px;background: #D5D5D5;">
						<div class="theme" style="float: left;font-weight: bold;">华为获客<br/></div>
						<!-- <p>浏览：0 集客：0</p> -->
						<p class="dtime" style="float: right;">2019-01-01</p>
					</el-button>
					</el-col>
				</el-row>
				
				<br/>
				<div>
				 	<el-upload 
				  class="upload-demo"
				  action="http://localhost:8080/customer/importcustomer"
				  name="importcustomer"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :before-remove="beforeRemove" multiple
				  :limit="3"
				  :on-exceed="handleExceed"
				  :file-list="fileList">
				  <el-button type="info">客户导入</el-button>
				</el-upload>
				<br/>
				<div slot="tip" class="el-upload__tip">
					<p style="font-weight:bold">注意：1.上传填写好的内容excel文件</p>
					<p style="font-weight:bold">2.只能上传xls/.xlsx文件，且不超过500kb</p>
				</div>
				</div>
				
				<br/>
				</div>
				
				<div class="info">
					<div class="card-box">
								<div class="inbox-widget" style="min-height: 300px;">
										<!-- <div class="inbox-item" id="15">
											<p class="inbox-item-author m-b-10">{{infoString}}</p>
											<p class="inbox-item-date">{{dateString}}</p>
										</div> -->
										<div class="inbox-item" id="15">
											<p class="inbox-item-author m-b-10"> 韩城 15145157879 华为获客模板</p>
											<p class="inbox-item-date">wly&nbsp;2019-03-09 21:18:14</p>
										</div>
										<div class="inbox-item" id="15">
											<p class="inbox-item-author m-b-10"> 诗琪 15545879003 财神到获客模板</p>
											<p class="inbox-item-date">lisa&nbsp;2019-03-06 09:19:13</p>
										</div>
										<div class="inbox-item" id="14">
											<p class="inbox-item-author m-b-10"> 鲸落 13565221014 财神到获客模板</p>
											<p class="inbox-item-date">mike&nbsp;2019-03-06 09:24:07</p>
										</div>
										<div class="inbox-item" id="13">
											<p class="inbox-item-author m-b-10">红叶 15512011458 华为获客模板</p>
											<p class="inbox-item-date">lisa&nbsp;2019-03-06 09:47:33</p>
										</div>
										<div class="inbox-item" id="12">
										<p class="inbox-item-author m-b-10"> 李洪刚 15558412011   财神到获客模板</p>
										<p class="inbox-item-date">rose&nbsp;2019-03-09 10:33:16</p>
										</div>
										</div>
								<div class="m-t-20">
									<span class="pull-right">最近5条【未处理】集客信息</span>
								</div>
							</div>
						</div>
				
				<!-- <div class="imgright">
					<img src="../imgs/customer/集客图片.jpg" width="500px" height="380px"/>
				</div> -->
				
				<!-- 集客分享star -->
				<el-dialog title="集客分享" :visible.sync="dialogFormVisible3">
					<template>
						<el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3" label-width="150px" >
						<el-form-item label="选中目标用户(所有者)" prop="client">
						  <!-- <el-radio-group v-model="ruleForm3.client" @change="changeRadio"> -->
						  	<el-radio v-model="ruleForm3.client" @change="changeRadio" v-for="item in adminRoles" :key="item" :label="item">{{item.name}}</el-radio> 
						  <!-- </el-radio-group> -->
						  </el-form-item>
						  </el-form>
						</template>
						<el-row>
							<el-col :span="12">
								<el-button type="primary" @click="distribution">确认集客<i class="el-icon-upload el-icon--right"></i></el-button>
							</el-col>
						</el-row>
				</el-dialog>
				<!-- 集客分享end -->
				
				<!-- 集客分享star -->
				<el-dialog title="集客分享" :visible.sync="dialogFormVisible4">
					<template>
						<el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3" label-width="150px" >
						<el-form-item label="选中目标用户(所有者)" prop="client">
						  <!-- <el-radio-group v-model="ruleForm3.client" @change="changeRadio"> -->
						  	<el-radio v-model="ruleForm3.client" @change="changeRadio" v-for="item in adminRoles" :key="item" :label="item">{{item.name}}</el-radio> 
						  <!-- </el-radio-group> -->
						  </el-form-item>
						  </el-form>
						</template>
						<el-row>
							<el-col :span="12">
								<el-button type="primary" @click="distribution2">确认集客<i class="el-icon-upload el-icon--right"></i></el-button>
							</el-col>
						</el-row>
				</el-dialog>
				<!-- 集客分享end -->
				
				<!-- 集客01弹窗 -->
			<el-dialog title="财神到,给您送礼来喽！" :visible.sync="dialogFormVisible">
				<div class="box1"><img alt="财神到" src="../imgs/customer/获客财神素材.jpg"></div>
			<div class="box2">
				<p>好礼迎新年，佳节喜上喜</p>
				<p>喝非常可乐，送财神到家</p>
				<p>情系新春，礼表爱意</p>
				<p>情义无价，爱我有奖</p>
				<p>赢春传心意，惊喜数不尽</p>
				<p>红运礼，红包带带两重送</p>
				<p>贴心礼，迎新如意级数送</p>
			</div>
			<br/>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="姓名:" prop="name">
				<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
			<el-form-item label="性别:" prop="sex">
			<el-radio-group v-model="ruleForm.sex">
				<el-radio label="1005">男</el-radio>
				<el-radio label="1006">女</el-radio>
			</el-radio-group>
			</el-form-item>
			<el-form-item label="移动电话" prop="phone">
			<el-input v-model.number="ruleForm.phone"/>
			</el-form-item>
			<el-form-item label="电子邮箱" prop="email">
			<el-input v-model.number="ruleForm.email"/>
			</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="8">
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-col>
				</el-row>
				</div>
			</el-dialog>
			<!-- 集客01弹窗end -->
			
			<!-- 集客02弹窗 -->
				<el-dialog title="如果你喜欢简单，我的细节会让你感动！" :visible.sync="dialogFormVisible2">
				<div class="box3">
				<img src="../imgs/customer/获客华为图片.jpg"/>
				<img src="../imgs/customer/获客华为图片02.jpg"/>
			</div>
			<br />
			<el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="100px">
				<el-form-item label="姓名:" prop="name">
				<el-input v-model="ruleForm2.name"></el-input>
				</el-form-item>
			<el-form-item label="性别:" prop="sex">
			<el-radio-group v-model="ruleForm2.sex">
				<el-radio label="1005">男</el-radio>
				<el-radio label="1006">女</el-radio>
			</el-radio-group>
			</el-form-item>
			<el-form-item label="移动电话" prop="phone">
			<el-input v-model.number="ruleForm2.phone"/>
			</el-form-item>
			<el-form-item label="电子邮箱" prop="email">
			<el-input v-model.number="ruleForm2.email"/>
			</el-form-item>
			</el-form>
			
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="8">
					<el-button type="primary" @click="submitForm2('ruleForm2')">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="resetForm('ruleForm2')">重置</el-button>
				</el-col>
				</el-row>
				</div>
				</el-dialog>
			<!-- 集客02弹窗end -->
			
		</div>
		
		<script type="text/javascript">
			var username=${jsonString};//用户姓名
			var Main = {
					//el: ".boxEmp",
					data() {
						//验证手机号码
						var checkPhone = (rule, value, callback) => {
						const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
						if (!value) {
							return callback(new Error('电话号码不能为空'))
						}
						setTimeout(() => {
							// Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
							// 所以在前面加了一个+实现隐式转换
							if (!Number.isInteger(+value)) {
							callback(new Error('请输入数字值'))
							} else {
							if (phoneReg.test(value)) {
								callback()
							} else {
								callback(new Error('电话号码格式不正确'))
							}
							}
						}, 100)
						};
						
						//验证电子邮箱
						var checkEmail = (rule, value, callback) => {
							const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
							if (!value) {
								return callback(new Error('邮箱不能为空'))
							}
							setTimeout(() => {
								if (mailReg.test(value)) {
								callback()
								} else {
								callback(new Error('请输入正确的邮箱格式'))
								}
							}, 100)
							}
						return {
							dialogFormVisible:false,//获客模板01
							dialogFormVisible2:false,//获客模板02
							//集客分享
							dialogFormVisible3:false,//集客所有者
							dialogFormVisible4:false,//集客所有者
							ruleForm3:[],
							rules3:'',
							//client:'',
							ruleForm2: {
								name: '',
								sex:'',
								email:'',
								phone:''
							},
							ruleForm: {
								name: '',
								sex:'',
								email:'',
								phone:''
							},
							rules: {
								name: [
									{ required: true, message: '请输入姓名', trigger: 'blur' },
									{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
								],
								sex:[
									{ required: true, message: '性别不能为空', trigger: 'blur' },
								],
								email: [
									{ required: true, validator: checkEmail, trigger: 'blur' }
								],
								phone: [
									{ required: true, validator: checkPhone, trigger: 'blur' }
								]
							},
							adminRoles:username,
							//单选框的值
							roles:'',
							//集客右边表格获取的数据
							/* infoString:[],
							dateString:[], */
							radio: 'inOrOut',
							fileList:[]
						};
					},
					 methods: {
						 //导入客户
						 beforeRemove(file, fileList) {
					          return this.$confirm(`确定移除 ${ file.name }？`);
					        },
					        handleRemove(file, fileList) {
					            console.log(file, fileList);
					          },
					      handlePreview(file) {
					        console.log(file);
					      },
					      handleExceed(files, fileList) {
					    	  this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
					      },
						 //获取到单选框的值
				        changeRadio (value) {
				        	this.roles=value.ID;
		        			console.log("***----:"+this.roles);
		        	    },
						//确认分发
					     distribution(){
							 this.dialogFormVisible=true;
							 this.dialogFormVisible3=false;
					     },
					   //确认分发02
					     distribution2(){
							 this.dialogFormVisible2=true;
							 this.dialogFormVisible4=false;
					     },
						 //财神到获客
						 submitForm(formName) {
					    	 var _this=this;
								this.$refs[formName].validate((valid) => {
									if (valid) {
										console.log('submit!');												
										//post提交数据
										axios.post('/customer/send01',
												//参数转换
												Qs.stringify({'name':_this.ruleForm.name,'sex':_this.ruleForm.sex,
													'phone':_this.ruleForm.phone,'email':_this.ruleForm.email,
													'client':_this.roles},{arrayFormat:'brackets'})
												//params:
												//ajax请求成功的回调函数
										).then(function(v){
											console.log("回调成功，获取了服务器端返回的值v");
											console.log(v);
											//console.log(v.date.infoString);
											//console.log(v.date.dateString);
											//_this.custinfo=v.date.infoString;
											//_this.dateinfo=v.date.dateString;
											_this.dialogFormVisible=false;
											_this.restaurants=v.data;
							           		_this.$notify({
							           	          title: '集客成功',
							           	          type: 'success',
							           	       	  duration:2000
							           	        });
										}).catch(function(){
											alert("出错了！");
										});
									} else {
									console.log('error submit!');
									return false;
									}
								});
								},
								resetForm(formName) {
								this.$refs[formName].resetFields();
								},
					//华为获客
					submitForm2(formName) {
						var _this=this;
						this.$refs[formName].validate((valid) => {
							if (valid) {
							//alert('submit!');
							console.log("----*2222"+_this.ruleForm2.name);
							console.log("----*"+_this.roles);
							//post提交数据
							axios.post('/customer/send02',
									//参数转换
									Qs.stringify({'name':_this.ruleForm2.name,'sex':_this.ruleForm2.sex,
										'phone':_this.ruleForm2.phone,'email':_this.ruleForm2.email,
										'client':_this.roles},{arrayFormat:'brackets'})
									//params:
										//ajax请求成功的回调函数
							).then(function(v){
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								_this.dialogFormVisible2=false;
								_this.restaurants=v.data;
				           		_this.$notify({
				           	          title: '集客成功',
				           	          type: 'success',
				           	       	  duration:2000
				           	        });
							}).catch(function(){
								alert("出错了！");
							});
							window.location.reload(); //强制刷新 
							} else {
							console.log('error submit!!');
							return false;
							}
						});
						},
					 }
				}
			
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
		</script>
	</body>
</html>
